<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :title="`更改劳务关系 - ${prop.item.name} [${prop.item.mob}]`" closable>
            <n-space vertical :size="36">
                <n-card size="small" :content-style="{ textAlign: 'center' }">
                    <n-image width="400" height="400" :src="model.contract || pic" objectFit="contain" />
                </n-card>
                <n-space justify="center">
                    <ButtonUpload v-model:value="model.contract" type="Image" accept="image/png,image/jpeg" title="点击上传劳务合同" />
                </n-space>

                <n-form-item :span="6" label="劳务关系起止日期">
                    <n-date-picker v-model:value="dates" type="daterange" :update-value-on-close="true" />
                </n-form-item>
            </n-space>

            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" :disabled="loading" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                    <n-button :disabled="loading" @click="execReset">
                        <template #icon>
                            <n-icon :component="RestoreRound" />
                        </template>
                        重置
                    </n-button>
                    <n-button type="primary" :loading="loading" @click="execSave">
                        <template #icon>
                            <n-icon :component="CheckRound" />
                        </template>
                        提交保存
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount, watch } from 'vue'
import { CloseRound, CheckRound, RestoreRound } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'

import ButtonUpload from '@/comp/func/ButtonUpload.vue'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入本地化语言
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.locale('zh-cn')
dayjs.extend(customParseFormat)

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const { $notification: notification } = window

const loading = ref(false)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        default: {},
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const pic = 'https://xxxxx.com/gimgs/comm/no_image.png'
const model = ref<any>({})

const dates = ref<number[]>([dayjs().valueOf(), dayjs().add(1, 'year').valueOf()])
watch([dates, () => dates.value], (nv, _ov) => {
    let v = nv[0] as number[]
    model.value.begin = dayjs(v[0]).format('YYYY-MM-DD')
    model.value.close = dayjs(v[1]).format('YYYY-MM-DD')
})

const execReset = () => {
    model.value = {
        id: prop.item.id,
        contract: prop.item.labor.contract,
        begin: prop.item.labor.begin || dayjs().format('YYYY-MM-DD'),
        close: prop.item.labor.close || dayjs().add(1, 'year').format('YYYY-MM-DD'),
    }
    if (prop.item.labor.begin && prop.item.labor.close) {
        dates.value = [dayjs(prop.item.labor.begin, 'YYYY-MM-DD').valueOf(), dayjs(prop.item.labor.close, 'YYYY-MM-DD').valueOf()]
    }
}

const execSave = (e: Event) => {
    e.preventDefault()

    loading.value = true
    Http.post('/ops/sys/emp/lobar/set', model.value).then(resp => {
        if (resp.stat.err > 0) {
            loading.value = false
            return
        }
        emit('refresh', {})
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功保存员工劳务合同信息',
        })
        setTimeout(() => {
            loading.value = false
            emit('update:show', false)
        }, 200)
    })
}

onBeforeMount(() => {
    execReset()
})
</script>
